<template>
  <section class="inConbox clearfix"> 
    <!-- 发布信息 -->
    <ul class="Verification_box dipW clearfix">
      <li class="content_li_box verfif_img_text dip ju_al_bet">
        <!-- <li class="content_li_box dip ju_al_bet"  @click="getSetUser()"> -->
        <!-- <section class="content_li_left dip ju_al_bet ">  -->
          <!-- 这是直弹出 -->
        <section class="content_li_left poas_res">
          <!--地层数据 -->
          <div class="content_li_leftBOX dip ju_al_bet">
            <span class="content_li_font">头像</span>
            <img :src="this.userLogo" alt="" class="content_li_img bdrb" v-if="this.userLogo != ''">
            <img src="../../../static/images/userifon/user_model.png" alt="" class="content_li_img" v-else>
          </div>
          <!-- 选着相册   -->
          <form class="content_li_leftBOX poas_res_child">
            
            <input type="file" id="xFile2"  accept="image/*"  name="file1"  class="content_HTp_INput"  @change.stop="upload" >



          </form>
        </section>
        <img src="../../../static/images/userifon/user_jiantou.png" alt="" class="user_con_ifonBoxjiantou">
      </li>
      <li class="content_li_box dip ju_al_bet">
        <section class="content_li_left dip ju_al_bet">
          <span class="content_li_font">创意师昵称</span>
          <input  type="text" class="content_li_text"  placeholder="创意师昵称" v-model="phoneNumbers">
        </section>
        <img src="../../../static/images/userifon/user_jiantou.png" alt="" class="user_con_ifonBoxjiantou">
      </li>
      <li class="content_li_box dip ju_al_bet" @click="getPay()">
        <section class="content_li dip ju_al_bet">
          <img src="../../../static/images/Order/assisLogo.png" alt="" class="assisLogo">
          <span class="content_verifin_fon">平台认证</span>
          <span class="contentfont_verifin">需要缴纳 <i>¥300.00</i> 元</span>
        </section>
        <img src="../../../static/images/Order/Order_moyactive.png" alt="" class="Order_moyactive" v-if="this.getpay">
        <img src="../../../static/images/Order/ORder_cool.png" alt="" class="Order_moyactive" v-else>
      </li>
      <li class="content_li_box dip ju_al content_li_boxText">说明：平台认证的创意师会提供认证标签，帮助您去接单</li>
      <li class="content_li_box dip ju_al border">
        <button class="Verifif_btn bdr" :class="{'Verifi_btn_active':this.btnAcetive}" @click="getPostRuter()">认证</button>
      </li>
    </ul>
  </section>
</template>
<script>
import Exif from 'exif-js' 
export default {
  data(){
    return{
      phoneNumbers:'',
      getpay:true, //点击判断
      btnAcetive:false,
      picture:'', //头像
      picValue:'',//保存图片信息的
      userLogo:'',//获取默认头像
      element:'',//上页信息
    }
  }, 
  methods:{
    getPay(){
      this.getpay = !this.getpay
    },

    upload (e) {  //拍照
      let files = e.target.files || e.dataTransfer.files || event.target.files; //兼容
      if (!files.length){ //小于0就出去
        return;  
      } 
      this.picValue = files[0];  //获取图像信息
      this.imgPreview(this.picValue); //调用处理函数 
      this.userMoneyActive = true //input 点击事件
    },  
    imgPreview (file) {  
      let self = this;  //缓存this
      let Orientation;  
      Exif.getData(file, function(){  //去获取拍照时的信息，解决拍出来的照片旋转问题，这是调用插件的事件获取图像的事件
          Orientation = Exif.getTag(this, 'Orientation');  
      });  
      if (!file || !window.FileReader) return;  // 看支持不支持FileReader  
  
      if (/^image/.test(file.type)) {  
          let reader = new FileReader();   // 创建一个reader  
          reader.readAsDataURL(file);    // 将图片2将转成 base64 格式  
          reader.onload = function () {   // 读取成功后的回调  
            let result = this.result;  
            let img = new Image();  
            img.src = result;  
            if (this.result.length <= (100 * 1024)) {  //判断图片是否大于100K,是就直接上传，反之压缩图片  
              self.userLogo = this.result; //显示改变后的图片 
              self.postImg();  //调用毁掉函数
            }else {  
              img.onload = function () {  
                let data = self.compress(img,Orientation); //这里调用压缩事件
                self.userLogo = data;  
                self.postImg();  
              }  
            }  
          }   
        }  
      },  
      postImg () {  
        //  this.$store.dispatch('showloader')  
        var zipFormData = new FormData();
        zipFormData.append("file",this.picValue);
        this.axios.post(this.$busPoat.upload(),zipFormData).then(response=>{
          // var st;
          // clearTimeout(st)
          // st = setTimeout(() =>{
          //   if(response != null || response != undefined){
            // console.log(response)
            if(response.data.iplanCode == '200'){
              this.picture = response.data.url
            }
        //     this.$store.dispatch('hideloader')
        //   }else{
        //     alert('请求加载过慢...')
        //     this.$store.dispatch('hideloader')
        //   }
        //   clearTimeout(st)                                                                       
        // },1000)
        }).catch(error=>{
          // this.$store.dispatch('hideloader')          
          alert('上传头像失败')
          console.log(error)
        })
      },  
      rotateImg (img, direction,canvas) {  
        //最小与最大旋转方向，图片旋转4次后回到原方向      
        const min_step = 0;      
        const max_step = 3;        
        if (img == null)return;      
        //img的高度和宽度不能在img元素隐藏后获取，否则会出错      
        let height = img.height;      
        let width = img.width;        
        let step = 2;      
        if (step == null) {      
            step = min_step;      
        }      
        if (direction == 'right') {      
            step++;      
            //旋转到原位置，即超过最大值      
            step > max_step && (step = min_step);      
        } else {      
            step--;      
            step < min_step && (step = max_step);      
        }       
        //旋转角度以弧度值为参数      
        let degree = step * 90 * Math.PI / 180;      
        let ctx = canvas.getContext('2d');      
        switch (step) {      
          case 0:      
              canvas.width = width;      
              canvas.height = height;      
              ctx.drawImage(img, 0, 0);      
              break;      
          case 1:      
              canvas.width = height;      
              canvas.height = width;      
              ctx.rotate(degree);      
              ctx.drawImage(img, 0, -height);      
              break;      
          case 2:      
              canvas.width = width;      
              canvas.height = height;      
              ctx.rotate(degree);      
              ctx.drawImage(img, -width, -height);      
              break;      
          case 3:      
              canvas.width = height;      
              canvas.height = width;      
              ctx.rotate(degree);      
              ctx.drawImage(img, -width, 0);      
              break;  
        }      
    },  
    compress(img,Orientation) {  
      let canvas = document.createElement("canvas");  
      let ctx = canvas.getContext('2d');  
        //瓦片canvas  
      let tCanvas = document.createElement("canvas");  
      let tctx = tCanvas.getContext("2d");  
      let initSize = img.src.length;  
      let width = img.width;  
      let height = img.height;  
      //如果图片大于四百万像素，计算压缩比并将大小压至400万以下  
      let ratio;  
      if ((ratio = width * height / 4000000) > 1) {  
        console.log("大于400万像素")  
        ratio = Math.sqrt(ratio);  
        width /= ratio;  
        height /= ratio;  
      } else {  
        ratio = 1;  
      }  
      canvas.width = width;  
      canvas.height = height;  
      //        铺底色  
      ctx.fillStyle = "#fff";  
      ctx.fillRect(0, 0, canvas.width, canvas.height);  
      //如果图片像素大于100万则使用瓦片绘制  
      let count;  
      if ((count = width * height / 1000000) > 1) {  
        console.log("超过100W像素");  
        count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片  
      //            计算每块瓦片的宽和高  
        let nw = ~~(width / count);  
        let nh = ~~(height / count);  
        tCanvas.width = nw;  
        tCanvas.height = nh;  
        for (let i = 0; i < count; i++) {  
          for (let j = 0; j < count; j++) {  
            tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);  
            ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);  
          }  
        }  
      } else {  
        ctx.drawImage(img, 0, 0, width, height);  
      }  
      //修复ios上传图片的时候 被旋转的问题  
      if(Orientation != "" && Orientation != 1){  
        switch(Orientation){  
          case 6://需要顺时针（向左）90度旋转  
              this.rotateImg(img,'left',canvas);  
              break;  
          case 8://需要逆时针（向右）90度旋转  
              this.rotateImg(img,'right',canvas);  
              break;  
          case 3://需要180度旋转  
              this.rotateImg(img,'right',canvas);//转两次  
              this.rotateImg(img,'right',canvas);  
              break;  
        }  
      }  
      //进行最小压缩  
      let ndata = canvas.toDataURL('image/*', 0.1);  
      // console.log('压缩前：' + initSize);  
      // console.log('压缩后：' + ndata.length);  
      // console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");  
      tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;  
      return ndata;  
    }, 





    getPostRuter(){
      this.$store.dispatch('showloader')        
      let phNum = this.phoneNumbers !='' ? this.phoneNumbers :null;
      let pictureS = this.picture !='' ? this.picture :null;
      let number = this.getpay ?2 :1;
      var obj = {
        "name":this.element.username,
        "idCard":this.element.userIdent,
        "phoneNumber":this.element.userPoen,
        "nickName":phNum,
        "picture":pictureS,
        "certificationLevel":number,
      }
      sessionStorage.setItem('userIFONasissOBJ',JSON.stringify(obj))
      // console.log(JSON.parse(sessionStorage.getItem('userIFONasissOBJ')))
        //login
      this.axios.post( this.$busPoat.certification(),obj).then((res)=>{
        // console.log(res)
        var st;
        clearTimeout(st)
        st = setTimeout(() =>{
          if(res!= null || res != undefined){
           this.$store.dispatch('hideloader')            
            if(res.data.iplanCode == 200){
              //long 
              if(this.getpay){
                //充值
                this.$router.push({
                  path:'/bomNav/Ordershuo/userassispayseccess'
                })
              }else{
                this.$router.push({
                  path:'/bomNav/Ordershuo/assisaccess'
                })
              }
            }else if(res.data.iplanCode == 101){
              alert('亲，你已是创意师')
                this.$router.push({
                path:'/bomNav/Ordershuo/assisaccess'
              })
            }
          }else{
            this.$store.dispatch('hideloader')            
            alert('请求加载过慢...')
          }
          clearTimeout(st)                                                                       
        },1000)
      }).catch(error=>{
        this.$store.dispatch('hideloader')        
        alert('认证失败')
        // console.log(error)
      })
        this.btnAcetive = true;
    }
  },
  created(){
    this.userLogo = sessionStorage.getItem('userpicture')
    this.element = JSON.parse(sessionStorage.getItem('userassisIFon'));
  },

}
</script>
<style lang="scss" scoped>
.Verification_box{
  width: 100%;
  position: relative;
  font-size: .24rem;
}
.content_li_box{
  width: 100%;
  border-bottom:.02rem solid #f2f2f2;
  background: #fff;
  height: 1.08rem;
  padding:0rem .4rem;
  .content_li_left{
    width: 95%;
    height: 100%;
    .content_li_leftBOX{
      width: 100%;
      height: 100%;
    }
    .content_li_font{
      font-size:.24rem;
      font-weight: 600;      
      color:#333;
    }
    .content_li_img{
      width: 1rem;
      height:1rem;
      // background: #000;
    }
    .content_li_text{
      font-size: .24rem;
      color:#d1d1d1;
      width: 80%;
      height: 80%;
      text-align: right;
    }
    .text_color_input{
      color:#DEDEDE;
    }
  }
  .user_con_ifonBoxjiantou{
    width: 0.1rem;
    height: 0.2rem;
  }
  .content_li{
    height: 10%;
    font-weight: 600;    
    .assisLogo{
      width: 0.5rem;
      height: 0.5rem;
    }
    .content_verifin_fon{
      font-size: .28rem;
      color:#333;
      margin:0rem .4rem;
    }
    .contentfont_verifin{
      font-size: .24rem;
      color:#999;
      i{
        color:#ff7200;
      }
    }
  }
  .Order_moyactive{
    width: 0.4rem;
    height: 0.4rem;
    margin-right:.2rem;
  }
 
}
.content_li_boxText{
  font-size: .24rem;
  color:#DEDEDE;
  height: 1.44rem;
  border:0;
}
.verfif_img_text{
  height: 1.46rem;
}
.poas_res{
  position: relative;
  top:0rem;
  left:0rem;
  .poas_res_child{
    position: absolute;
    top:0rem;
    right:0rem;
    background:transparent;
    font-size: .24rem;
    color:transparent;
    width: 80%;
    height: 100%;
  }
}
.content_HTp_INput{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: transparent;
  color:transparent;
  // filter:alpha(opacity:0);
  // opacity: 0;
  // width:0px 
}
.Verifif_btn{
  width: 100%;
  height: 1rem;
  background:#FF7200;
  font-size:.3rem;
  color:#fff;
  text-align: center;
  margin-top:.38rem;
  line-height: 1rem;

}
.Verifi_btn_active{
  background: #e56600;
}
.border{
  border:0;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
  color: #AEAEAE;
} 
input:-moz-placeholder, textarea:-moz-placeholder { 
  color: #AEAEAE;
} 
input::-moz-placeholder, textarea::-moz-placeholder { 
  color: #AEAEAE;
} 
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
  color: #AEAEAE;
} 
</style>
